<template>
  <div>
    <div class="top"></div>
    <van-row type="flex" justify="center">
      <div class="headImg">
        <img :src="userInfo.hover">
      </div>
    </van-row>

    <van-panel title="分组" :desc="userInfo.desc" :status="userInfo.status">
      <van-row>
        <van-cell title="姓名" :value="userInfo.name" />
        <van-cell title="联系电话" :value="userInfo.phone" />
        <van-cell title="专业班级" :value="userInfo.class" />
        <van-cell title="企业邮箱" :value="userInfo.email" />
      </van-row>
      <div slot="footer">
        <van-row type="flex" justify="space-around">
          <van-button size="normal" type="primary">修改信息</van-button>
          <van-button size="normal" type="danger">注销登录</van-button>
        </van-row>
      </div>
    </van-panel>
    <div class="bottom"></div>
  </div>
</template>

<script>
/**
 * 约定:desc:0前端 1后端 2产品 3运营 4视觉
 *status:0非正式成员 1体验式成员 2正式成员 3小组负责人
 * */
const USERINFO = {
  desc: ['Web前端', '服务端', '产品', '运营', '视觉'],
  status: ['非正式成员', '体验式成员', '正式成员', '小组负责人']
}
export default {
  name: 'loginUser',
  data () {
    return {
      userInfo: {
        hover: 'https://img2.woyaogexing.com/2018/11/02/e84c1d0866ad4ea983cd6a59bb60b756!400x400.jpeg',
        desc: USERINFO.desc[0],
        status: USERINFO.status[3],
        name: '薛开麒',
        phone: 13088974963,
        class: '网络1605',
        email: 'xuekaiqi@creatshare.com'
      }
    }
  }
}
</script>

<style scoped>
.headImg {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid darkseagreen;
  margin: 30px 0;
}
.headImg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
</style>
